﻿<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5+CSS3鼠标悬停图片特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/set1.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body class="keBody">
    <h1 class="keTitle">HTML5+CSS3鼠标悬停图片特效</h1>
    <div class="kePublic">
        <!--效果html开始-->
        <div class="container">
            <header class="codrops-header">
                <nav class="codrops-demos">
                    <a class="current-demo" href="index.html">Demo1</a>
                    <a href="index2.html">Demo2</a>
                </nav>
            </header>

            <div class="content">

                <div class="grid">
                    <figure class="effect-lily">
                        <img src="img/01.jpg" alt="img12" />
                        <figcaption>
                            <div>
                                <h2>
                                    Nice <span>Lily</span>
                                </h2>
                                <p>Lily likes to play with crayons
                                    and pencils</p>
                            </div>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-lily">
                        <img src="img/02.jpg" alt="img1" />
                        <figcaption>
                            <div>
                                <h2>
                                    Nice <span>Lily</span>
                                </h2>
                                <p>Lily likes to play with crayons
                                    and pencils</p>
                            </div>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Sadie</h2>
                <div class="grid">
                    <figure class="effect-sadie">
                        <img src="img/02.jpg" alt="img02" />
                        <figcaption>
                            <h2>
                                Holy <span>Sadie</span>
                            </h2>
                            <p>
                                Sadie never took her eyes off me. <br>She
                                had a dark soul.
                            </p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-sadie">
                        <img src="img/01.jpg" alt="img14" />
                        <figcaption>
                            <h2>
                                Holy <span>Sadie</span>
                            </h2>
                            <p>
                                Sadie never took her eyes off me. <br>She
                                had a dark soul.
                            </p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Honey</h2>
                <div class="grid">
                    <figure class="effect-honey">
                        <img src="img/02.jpg" alt="img04" />
                        <figcaption>
                            <h2>
                                Dreamy <span>Honey</span> <i>Now</i>
                            </h2>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-honey">
                        <img src="img/01.jpg" alt="img05" />
                        <figcaption>
                            <h2>
                                Dreamy <span>Honey</span> <i>Now</i>
                            </h2>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Layla</h2>
                <div class="grid">
                    <figure class="effect-layla">
                        <img src="img/01.jpg" alt="img06" />
                        <figcaption>
                            <h2>
                                Crazy <span>Layla</span>
                            </h2>
                            <p>When Layla appears, she brings an
                                eternal summer along.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-layla">
                        <img src="img/02.jpg" alt="img03" />
                        <figcaption>
                            <h2>
                                Crazy <span>Layla</span>
                            </h2>
                            <p>When Layla appears, she brings an
                                eternal summer along.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Zoe</h2>
                <div class="grid">
                    <figure class="effect-zoe">
                        <img src="img/02.jpg" alt="img25" />
                        <figcaption>
                            <h2>
                                Creative <span>Zoe</span>
                            </h2>
                            <p class="icon-links">
                                <a href="###"><span
                                    class="icon-heart"></span></a> <a
                                    href="###"><span
                                    class="icon-eye"></span></a> <a
                                    href="###"><span
                                    class="icon-paper-clip"></span></a>
                            </p>
                            <p class="description">Zoe never had the
                                patience of her sisters. She
                                deliberately punched the bear in his
                                face.</p>
                        </figcaption>
                    </figure>
                    <figure class="effect-zoe">
                        <img src="img/01.jpg" alt="img26" />
                        <figcaption>
                            <h2>
                                Creative <span>Zoe</span>
                            </h2>
                            <p class="icon-links">
                                <a href="###"><span
                                    class="icon-heart"></span></a> <a
                                    href="###"><span
                                    class="icon-eye"></span></a> <a
                                    href="###"><span
                                    class="icon-paper-clip"></span></a>
                            </p>
                            <p class="description">Zoe never had the
                                patience of her sisters. She
                                deliberately punched the bear in his
                                face.</p>
                        </figcaption>
                    </figure>
                </div>

                <h2>Oscar</h2>
                <div class="grid">
                    <figure class="effect-oscar">
                        <img src="img/01.jpg" alt="img09" />
                        <figcaption>
                            <h2>
                                Warm <span>Oscar</span>
                            </h2>
                            <p>Oscar is a decent man. He used to
                                clean porches with pleasure.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-oscar">
                        <img src="img/02.jpg" alt="img10" />
                        <figcaption>
                            <h2>
                                Warm <span>Oscar</span>
                            </h2>
                            <p>Oscar is a decent man. He used to
                                clean porches with pleasure.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Marley</h2>
                <div class="grid">
                    <figure class="effect-marley">
                        <img src="img/02.jpg" alt="img11" />
                        <figcaption>
                            <h2>
                                Sweet <span>Marley</span>
                            </h2>
                            <p>Marley tried to convince her but she
                                was not interested.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-marley">
                        <img src="img/01.jpg" alt="img12" />
                        <figcaption>
                            <h2>
                                Sweet <span>Marley</span>
                            </h2>
                            <p>Marley tried to convince her but she
                                was not interested.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Ruby</h2>
                <div class="grid">
                    <figure class="effect-ruby">
                        <img src="img/01.jpg" alt="img13" />
                        <figcaption>
                            <h2>
                                Glowing <span>Ruby</span>
                            </h2>
                            <p>Ruby did not need any help. Everybody
                                knew that.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-ruby">
                        <img src="img/02.jpg" alt="img14" />
                        <figcaption>
                            <h2>
                                Glowing <span>Ruby</span>
                            </h2>
                            <p>Ruby did not need any help. Everybody
                                knew that.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Roxy</h2>
                <div class="grid">
                    <figure class="effect-roxy">
                        <img src="img/02.jpg" alt="img15" />
                        <figcaption>
                            <h2>
                                Charming <span>Roxy</span>
                            </h2>
                            <p>Roxy was my best friend. She'd cross
                                any border for me.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-roxy">
                        <img src="img/01.jpg" alt="img01" />
                        <figcaption>
                            <h2>
                                Charming <span>Roxy</span>
                            </h2>
                            <p>Roxy was my best friend. She'd cross
                                any border for me.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Bubba</h2>
                <div class="grid">
                    <figure class="effect-bubba">
                        <img src="img/01.jpg" alt="img02" />
                        <figcaption>
                            <h2>
                                Fresh <span>Bubba</span>
                            </h2>
                            <p>Bubba likes to appear out of thin
                                air.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-bubba">
                        <img src="img/02.jpg" alt="img16" />
                        <figcaption>
                            <h2>
                                Fresh <span>Bubba</span>
                            </h2>
                            <p>Bubba likes to appear out of thin
                                air.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Romeo</h2>
                <div class="grid">
                    <figure class="effect-romeo">
                        <img src="img/02.jpg" alt="img17" />
                        <figcaption>
                            <h2>
                                Wild <span>Romeo</span>
                            </h2>
                            <p>Romeo never knows what he wants. He
                                seemed to be very cross about something.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-romeo">
                        <img src="img/01.jpg" alt="img18" />
                        <figcaption>
                            <h2>
                                Wild <span>Romeo</span>
                            </h2>
                            <p>Romeo never knows what he wants. He
                                seemed to be very cross about something.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Dexter</h2>
                <div class="grid">
                    <figure class="effect-dexter">
                        <img src="img/01.jpg" alt="img19" />
                        <figcaption>
                            <h2>
                                Strange <span>Dexter</span>
                            </h2>
                            <p>Dexter had his own strange way. You
                                could watch him training ants.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-dexter">
                        <img src="img/02.jpg" alt="img12" />
                        <figcaption>
                            <h2>
                                Strange <span>Dexter</span>
                            </h2>
                            <p>Dexter had his own strange way. You
                                could watch him training ants.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Sarah</h2>
                <div class="grid">
                    <figure class="effect-sarah">
                        <img src="img/02.jpg" alt="img13" />
                        <figcaption>
                            <h2>
                                Free <span>Sarah</span>
                            </h2>
                            <p>Sarah likes to watch clouds. She's
                                quite depressed.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-sarah">
                        <img src="img/01.jpg" alt="img20" />
                        <figcaption>
                            <h2>
                                Free <span>Sarah</span>
                            </h2>
                            <p>Sarah likes to watch clouds. She's
                                quite depressed.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Chico</h2>
                <div class="grid">
                    <figure class="effect-chico">
                        <img src="img/01.jpg" alt="img15" />
                        <figcaption>
                            <h2>
                                Silly <span>Chico</span>
                            </h2>
                            <p>Chico's main fear was missing the
                                morning bus.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-chico">
                        <img src="img/02.jpg" alt="img04" />
                        <figcaption>
                            <h2>
                                Silly <span>Chico</span>
                            </h2>
                            <p>Chico's main fear was missing the
                                morning bus.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Milo</h2>
                <div class="grid">
                    <figure class="effect-milo">
                        <img src="img/02.jpg" alt="img11" />
                        <figcaption>
                            <h2>
                                Faithful <span>Milo</span>
                            </h2>
                            <p>Milo went to the woods. He took a fun
                                ride and never came back.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-milo">
                        <img src="img/01.jpg" alt="img03" />
                        <figcaption>
                            <h2>
                                Faithful <span>Milo</span>
                            </h2>
                            <p>Milo went to the woods. He took a fun
                                ride and never came back.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <nav class="codrops-demos">
                <a class="current-demo" href="index.html">Demo1</a> <a
                    href="index2.html">Demo2</a>
            </nav>

        </div>
        <!-- /container -->
        <!--效果html结束-->
        <div class="clear"></div>
    </div>
</body>
</html>